<template>
  <div class="main_box">
    <div class="main_top">
      <!-- <span><img src="@/assets/img/homwAnalyse/gohome.png" alt=""><b>回到首页</b></span> -->
      <div class="top_left" />
      <p>决策分析-支出预警中心</p>
      <div class="top_right">
        <!-- <img src="@/assets/img/townPreview/定位.png" alt=""> -->
        <i class="el-icon-location" style="color:#0169d4;fontSize:24px" />
        <span>浙江省-绍兴市-越城区</span>
      </div>
    </div>
    <div class="main_con clearfix">
      <div class="main_con_left">
        <div class="con_l_top">
          <div class="con_left_top">
            <div>
              <img src="@/assets/img/homwAnalyse/line chart.png" alt="">
              <h3>各乡镇支出金额</h3>
            </div>
            <!-- <el-button size="small" type="primary" @click="gotAnalyse"
              >收入分析</el-button
            > -->
            <!-- <div class="con_plan">
              <span></span>
              <b>预算数</b>
            </div>
            <div class="con_new">
              <span></span>
              <b>已拨付</b>
            </div> -->
          </div>
          <div id="con_left">
            <VEcharts
              autoresize
              :options="optsLeft"
              style="width: 100%; height: 100%"
            />
          </div>
        </div>
        <!-- <div class="con_l_bot">
          <ul>
            <li v-for="item in left_list" :key="item.id">
              <img
                v-if="item.id === 1"
                src="@/assets/img/homwAnalyse/财政补助.png"
                alt=""
              >
              <img
                v-if="item.id === 2"
                src="@/assets/img/homwAnalyse/财政补助 (1).png"
                alt=""
              >
              <img
                v-if="item.id === 3"
                src="@/assets/img/homwAnalyse/财政补助 (2).png"
                alt=""
              >
              <p>{{ item.text }}</p>
              <span :style="{ color: item.color }">{{ item.num }}</span>
            </li>
          </ul>
        </div> -->
      </div>
      <div class="main_con_midle">
        <div style="height:74%;">
          <div class="con_midle_top">
            <div v-for="item in top_list" :key="item.id" class="sum_plan">
              <p>{{ item.value }}</p>
              <span>{{ item.text }}</span>
            </div>
          </div>
          <div class="con_midle_map">
            <map-echarts @into-town="intoTown" />
          </div>
        </div>
        <div class="con_midle_bot">
          <div class="midle_bot_top">
            <img src="@/assets/img/homwAnalyse/control.png" alt="">
            <h3>抽查巡查统计</h3>
          </div>
          <div id="midle_bot">
            <VEcharts
              autoresize
              :options="optsMid"
              style="width: 100%; height: 100%"
            />
          </div>
        </div>
      </div>
      <div class="main_con_right">
        <div class="con_right_top">
          <div
            v-for="item in rightTopList"
            :key="item.id"
            :class="
              item.id === 6 || item.id === 7 ? 'right_old_list' : 'right_t_list'
            "
            @click="getTable(item.title)"
          >
            <p>{{ item.title }}</p>
            <span>{{ item.num }}</span>
          </div>
        </div>
        <div class="con_right_bot">
          <div class="list_top">
            <img src="@/assets/img/homwAnalyse/bar chart.png" alt="">
            <h3>项目支出明细</h3>
            <div class="list_details" @click="gomore">查看详情</div>
          </div>
          <div class="list">
            <el-table
              :data="tableData"
              :row-class-name="tableRowClassName"
              :header-cell-style="{ background: '#0169d4' }"
              height="90%"
              @row-click="gohandle"
            >
              <el-table-column prop="PROGRAMNAME" label="项目名称" />
              <el-table-column prop="MONEY1" label="预算数" />
              <el-table-column prop="MONEY2" label="拨付数" />
              <el-table-column prop="RATE" label="资金使用率">
                <template slot-scope="data">
                  <span>{{ data.row.RATE }}%</span>
                </template>
              </el-table-column>
            </el-table>
            <div class="block">
              <el-pagination
                layout="prev, pager, next"
                :total="total"
                :background="true"
                :page-size="10"
                @current-change="handleCurrentChange"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import echarts from "echarts ";
// import { dataList } from "./tableData.js";
// const echarts = require('echarts/lib/echarts');
import MapEcharts from '@/components/homwAnalyse/mapecharts';
import VEcharts from '@/components/vecharts';
import {
  getQueryBodyByProduce,
  getReportHeaderByTableId
} from '@/api/dynamicInterface';
// 引入柱状图组件
require('echarts/lib/component/title');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/grid');
require('echarts/lib/component/legend');
require('echarts/lib/chart/bar');
require('echarts/lib/chart/line');

export default {
  components: {
    MapEcharts,
    VEcharts
  },
  data() {
    return {
      top_list: [],
      left_list: [
        {
          id: 1,
          img: '财政补助.png',
          text: '蓝色预警',
          color: '#0051ad',
          num: 9
        },
        {
          id: 2,
          img: '财政补助(1).png',
          text: '红色预警',
          color: '#d40000',
          num: 3
        },
        {
          id: 3,
          img: '财政补助(2).png',
          text: '橙色预警',
          color: '#ff6b00',
          num: 3
        }
      ],
      tableData: [],
      rightTopList: [],
      cap_left: {
        name: [],
        money: []
      },
      cap_mid_bot: {
        name: [],
        money: []
      },
      total: 0,
      tableTitle: '人员经费',
      route: ''
    };
  },
  // created() {
  //   this.$nextTick(() => {
  //     this.get_con_left();
  //   });
  // },
  computed: {
    optsLeft() {
      const newArr = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        // legend: {
        //   data: ["预算数", "已拨付"],
        // },
        grid: {
          left: '2%',
          right: '4%',
          bottom: '25px',
          top: '12px',
          containLabel: true
        },
        xAxis: {
          show: false,
          type: 'value',
          boundaryGap: [0, 0.01],
          splitLine: {
            show: false
          }
        },
        yAxis: {
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#0169d4'
            }
          },
          textStyle: {
            fontSize: '18'
          },

          type: 'category',
          data: this.cap_left.name
        },
        series: [
          {
            name: '预算数',
            type: 'bar',
            data: this.cap_left.money,
            itemStyle: {
              normal: {
                color: '#0169D4'
              }
            }
          }
          // {
          //   name: "已拨付",
          //   type: "bar",
          //   data: [45, 58, 20, 28, 45, 23, 52, 60, 30, 10, 62, 70, 61, 13],
          //   itemStyle: {
          //     normal: {
          //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          //         {
          //           offset: 0,
          //           color: "#93eed2",
          //         },
          //         {
          //           offset: 1,
          //           color: "#5ad8a6",
          //         },
          //       ]),
          //     },
          //   },
          // },
        ]
      };
      return newArr;
    },
    optsMid() {
      const newArr1 = {
        xAxis: {
          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 0,
            rotate: 30
          },
          type: 'category',
          data: this.cap_mid_bot.name
        },
        grid: {
          top: '6%',
          left: '6%',
          right: '6%',
          bottom: '2%',
          containLabel: true
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.cap_mid_bot.money,
            itemStyle: {
              normal: {
                color: '#0169D4'
              }
            },
            type: 'bar'
          }
        ]
      };
      // const newArr1 = {
      //   grid: {
      //     left: "25px",
      //     right: "23px",
      //     bottom: "25px",
      //     top: "12px",
      //     containLabel: true
      //   },
      //   xAxis: {
      //     type: "category",
      //     boundaryGap: false,
      //     data: [
      //       "1月",
      //       "2月",
      //       "3月",
      //       "4月",
      //       "5月",
      //       "6月",
      //       "7月",
      //       "8月",
      //       "9月",
      //       "10月",
      //       "11月",
      //       "12月"
      //     ]
      //   },
      //   yAxis: {
      //     type: "value",
      //     max: 1000,
      //     min: 0,
      //     minInterval: 250,
      //     axisTick: {
      //       show: false
      //     },
      //     axisLine: {
      //       show: false
      //     }
      //   },
      //   series: [
      //     {
      //       data: [
      //         500,
      //         480,
      //         890,
      //         934,
      //         510,
      //         590,
      //         1000,
      //         610,
      //         110,
      //         0,
      //         0,
      //         250,
      //         190
      //       ],
      //       type: "line",
      //       areaStyle: {
      //         normal: {
      //           color: "#0169D4",
      //           opacity: "0.4"
      //         }
      //       },
      //       symbol: "none",
      //       lineStyle: {
      //         color: "#0169D4"
      //       }
      //     }
      //   ]
      // };
      return newArr1;
    },
    menuList() {
      return this.$store.state.permission.menuList;
    }
  },
  mounted() {
    // this.get_con_left();
    // this.get_line_chart();
    // window.onresize = () => {
    //   // 基于准备好的dom，初始化echarts实例
    //   const myChart = this.$echarts.init(document.getElementById('con_left'));
    //   myChart.resize();
    // };
    // const that = this;
    // window.addEventListener("resize", function() {
    //   that.mychart.resize();
    // });
  },
  created() {
    this.getcap_list();
    this.getcap_mid_bot();
    this.getMid_top();
    this.gitright();
    this.getData();
  },
  methods: {
    gotAnalyse() {
      this.$router.push('/incomeAnalyse');
    },
    gomore() {
      this.getRouter(this.menuList, '任务库');
      this.$router.push(this.route);
    },
    gohandle() {
      this.getRouter(this.menuList, '一码通管');
      this.$router.push(this.route);
    },
    intoTown(data) {
      if (data.name === '齐贤') {
        // router.push('/Nextmian');
        // console.log(11);

        this.$router.push('/NextMain');
        // console.log(this);
      }
      // router.push('/Statistic');
    },
    getcap_list() {
      getQueryBodyByProduce({
        filterList: [],
        pageIndex: 0,
        pageSize: 100,
        pageType: 1,
        tableId: 473
      }).then(res => {
        if (res.success) {
          res.data.forEach(item => {
            this.cap_left.name.unshift(item.ENTERPRISENAME);
            this.cap_left.money.unshift(item.MONEY2);
          });
        } else {
          this.$message({
            message: res.message,
            type: 'warning'
          });
        }
      });
    },
    async getMid_top() {
      const res1 = await getReportHeaderByTableId({ tableId: 474 });
      const { data } = await getQueryBodyByProduce({
        filterList: [],
        pageIndex: 0,
        pageSize: 100,
        pageType: 1,
        tableId: 474
      });
      res1.data.forEach((item, index) => {
        // if (item.title === "总预算数") {

        this.top_list.push({
          id: index,
          text: item.title,
          value: data[0][`MONEY${index + 1}`]
        });
        // }
        // if (item.title === "总预算数") {
        //   this.top_list.push({
        //     id: index,
        //     text: item.title,
        //     value: data[0].MONEY1
        //   });
        // } else if (item.title === "总支出数") {
        //   this.top_list.push({
        //     id: index,
        //     text: item.title,
        //     value: data[0].MONEY2
        //   });
        // } else if (item.title === "剩余可支出数") {
        //   this.top_list.push({
        //     id: index,
        //     text: item.title,
        //     value: data[0].MONEY3
        //   });
        // }
      });
    },
    getcap_mid_bot() {
      getQueryBodyByProduce({
        filterList: [],
        pageIndex: 0,
        pageSize: 100,
        pageType: 1,
        tableId: 477
      }).then(res => {
        if (res.success) {
          res.data.forEach(item => {
            this.cap_mid_bot.name.push(item.ENTERPRISENAME);
            this.cap_mid_bot.money.push(item.NUM);
          });
        } else {
          this.$message({
            message: res.message,
            type: 'warning'
          });
        }
      });
    },
    async gitright() {
      const res1 = await getReportHeaderByTableId({ tableId: 475 });
      const { data } = await getQueryBodyByProduce({
        filterList: [],
        pageIndex: 0,
        pageSize: 100,
        pageType: 1,
        tableId: 475
      });
      res1.data.forEach((item, index) => {
        this.rightTopList.push({
          id: index,
          title: item.title,
          num: data[0][`MONEY${index + 1}`]
        });
      });
    },
    getData(title, index) {
      getQueryBodyByProduce({
        filterList: [{ col: 'Y_ZJXZ', value: title || '人员经费' }],
        pageIndex: index || 0,
        pageSize: 10,
        pageType: 1,
        tableId: 476
      }).then(res => {
        if (res.data) {
          this.total = res.page.total;
          this.tableData = res.data;
        } else {
          this.$message({
            message: '暂无数据',
            type: 'warning'
          });
        }
      });
    },
    getTable(val) {
      this.tableData = [];
      this.tableTitle = val;
      this.getData(val);
    },
    tableRowClassName({ rowIndex }) {
      if (rowIndex % 2 === 0) {
        return 'name-row';
      } else if (rowIndex % 2 === 1) {
        return 'plan-row';
      }
      return '';
    },
    handleCurrentChange(val) {
      this.getData(this.tableTitle, val - 1);
    },
    getRouter(arr, title) {
      arr.forEach(item => {
        if (item.title === title) {
          this.route = `${item.path}?isHideLeft=${item.isHideLeft}&isHideTop=${item.isHideTop}`;
        } else if (item.children) {
          this.getRouter(item.children, title);
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
p,
h3 {
  margin: 0;
}
.main_box {
  background: rgba(91, 143, 249, 0.07);
  padding-bottom: 23px;
  height: 100%;
  width: 100%;
  overflow-y: auto;
  .main_top {
    height: 9.5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 90px;
    p {
      width: 50%;
      font-size: 32px;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      color: #003b87;
      text-align: center;
    }
    .top_left {
      color: transparent;
      width: 25%;
    }
    .top_right {
      width: 25%;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      span {
        color: #0169d4;
        font-weight: 500;
        font-size: 18px;
        margin-left: 6px;
      }
    }
  }
}
.main_con {
  padding: 0 20px;
  display: flex;
  justify-content: space-around;
  height: 90.5%;
  width: 100%;
  .main_con_left {
    width: 25%;
    // height: 887px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .con_l_bot {
      height: 24%;
      ul {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;
        list-style: none;
        height: 100%;
        li {
          height: 30%;
          display: flex;
          align-items: center;
          padding-left: 14px;
          background: rgba(255, 255, 255, 0.65);
          border-radius: 10px;
          box-shadow: 9px 9px 25px 0px rgba(0, 0, 0, 0.08);
          p {
            width: 40%;
            font-size: 24px;
            font-family: PingFangSC, PingFangSC-Medium;
            font-weight: 500;
            color: #4ca7ed;
            margin-left: 13px;
          }
          span {
            width: 40%;
            font-size: 40px;
            font-family: DINCondensed, DINCondensed-Bold;
            font-weight: 700;
          }
        }
      }
    }

    .con_l_top {
      padding-left: 5px;
      width: 100%;
      height: 100%;
      box-shadow: 9px 9px 25px 0px rgba(0, 0, 0, 0.08);
      background: rgba(255, 255, 255, 0.65);
      border-radius: 20px;
    }
    .con_left_top {
      position: relative;
      padding: 20px 26px 0 26px;

      // height: 44px;
      display: flex;
      justify-content: space-between;
      /deep/.el-button {
        border-radius: 0;
      }
      img {
        width: 15px;
        height: 14px;
        vertical-align: middle;
      }
      h3 {
        display: inline-block;
        height: 25px;
        font-size: 18px;
        font-family: PingFangSC, PingFangSC-Medium;
        line-height: 25px;
        margin-left: 6px;
        vertical-align: middle;
        color: #4ca7ed;
      }
      .con_plan {
        position: absolute;
        right: 26px;
        top: 3px;
        span {
          display: inline-block;
          width: 8px;
          height: 8px;
          background: linear-gradient(90deg, #94c2fd, #5b8ff9) r;
        }
        b {
          display: inline-block;
          height: 17px;
          font-size: 12px;
          font-family: PingFangSC, PingFangSC-Regular;
          line-height: 17px;
          margin-left: 8px;
          color: #8c8c8c;
        }
      }
      .con_new {
        position: absolute;
        right: 26px;
        top: 24px;
        span {
          display: inline-block;
          width: 8px;
          height: 8px;
          background: linear-gradient(90deg, #93eed2, #5ad8a6);
        }
        b {
          display: inline-block;
          height: 17px;
          font-size: 12px;
          font-family: PingFangSC, PingFangSC-Regular;
          line-height: 17px;
          margin-left: 8px;
          color: #8c8c8c;
        }
      }
    }
  }
  .main_con_midle {
    position: relative;
    // height: 880px;
    height: 100%;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .con_midle_top {
      display: flex;
      justify-content: space-between;
      margin-left: 20px;
      width: 99%;
      height: 18%;
      .sum_plan {
        width: 32%;
        height: 100%;
        background: rgba(255, 255, 255, 0.65);
        border-radius: 20px;
        box-shadow: 9px 9px 25px 0px rgba(0, 0, 0, 0.08);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        p {
          width: 100%;
          text-align: center;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 36px;
          font-family: DINCondensed, DINCondensed-Bold;
          font-weight: 700;
          color: #0051ad;
        }
        span {
          font-family: PingFangSC, PingFangSC-Medium;
          color: #4ca7ed;
          margin-top: 1px;
        }
      }
    }
    .con_midle_map {
      width: 100%;
      height: 87%;
      background: url(../../assets/img/homwAnalyse/map_bj.png);
      background-size: 105% 100%;
      margin-left: 10px;
    }
    .con_midle_bot {
      // position: absolute;
      // bottom: 0;
      // left: 24px;
      width: 99%;
      margin-left: 20px;
      height: 24%;
      background: rgba(255, 255, 255, 0.65);
      border-radius: 20px;
      box-shadow: 9px 9px 25px 0px rgba(0, 0, 0, 0.08);
      .midle_bot_top {
        height: 54px;
        padding: 20px 0 0 26px;
        img {
          vertical-align: middle;
        }
        h3 {
          display: inline-block;
          vertical-align: middle;
          font-size: 18px;
          font-family: PingFangSC, PingFangSC-Medium;
          color: #4ca7ed;
          margin-left: 5px;
          vertical-align: middle;
        }
      }
    }
  }
  .main_con_right {
    margin-left: 30px;
    height: 100%;
    width: 25%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .con_right_top {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      height: 30%;
      align-items: center;
      .right_t_list {
        cursor: pointer;
        width: 31%;
        height: 30%;
        border-radius: 8px;
        box-shadow: 9px 9px 25px 0px rgba(0, 0, 0, 0.08);
        &:hover {
          p {
            color: #fff;
            background: rgba(1, 105, 212, 0.8);
          }
          span {
            color: #fff;
            background: rgba(1, 105, 212, 0.65);
          }
        }
        p {
          padding-left: 8px;
          color: #4ca7ed;
          height: 41%;
          background: rgba(255, 255, 255, 0.65);
          border-radius: 8px 8px 0px 0px;
        }
        span {
          padding-left: 8px;
          display: block;
          height: 59%;
          width: 100%;
          color: #0051ad;
          font-size: 22px;
          font-weight: bold;
          background: rgba(91, 143, 249, 0.07);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .right_old_list {
        cursor: pointer;
        width: 48%;
        height: 30%;
        background: rgba(255, 255, 255, 0.65);
        border-radius: 8px;
        box-shadow: 9px 9px 25px 0px rgba(0, 0, 0, 0.08);
        &:hover {
          p {
            color: #fff;
            background: rgba(1, 105, 212, 0.8);
          }
          span {
            color: #fff;
            background: rgba(1, 105, 212, 0.65);
          }
        }
        p {
          padding-left: 8px;
          color: #4ca7ed;
          height: 41%;
          background: rgba(255, 255, 255, 0.65);
          border-radius: 8px 8px 0px 0px;
        }
        span {
          padding-left: 8px;
          display: block;
          height: 59%;
          color: #0051ad;
          font-size: 22px;
          font-weight: bold;
          background: rgba(91, 143, 249, 0.07);
        }
      }
    }
    .con_right_bot {
      width: 100%;
      height: 68%;
      background: rgba(255, 255, 255, 0.65);
      border-radius: 20px;
      box-shadow: 9px 9px 25px 0px rgba(0, 0, 0, 0.08);
      .list_top {
        position: relative;
        height: 14%;
        padding: 20px 0 0 26px;
        img {
          vertical-align: middle;
        }
        h3 {
          display: inline-block;
          height: 25px;
          font-size: 18px;
          font-family: PingFangSC, PingFangSC-Medium;
          line-height: 25px;
          margin-left: 4px;
          vertical-align: middle;
          color: #4ca7ed;
        }
        .list_details {
          position: absolute;
          top: 23px;
          right: 17px;
          width: 88px;
          height: 32px;
          border: 1px solid #1890ff;
          border-radius: 3px;
          text-align: center;
          line-height: 32px;
          color: #1890ff;
          font-size: 14px;
          cursor: pointer;
        }
      }
      .list {
        padding: 0 5px 0 18px;
        height: 86%;
        /deep/.el-table td,
        /deep/.el-table th {
          text-align: center;
          height: 54px;
          border-bottom: none;
        }
        /deep/.el-table__header-wrapper tr {
          background: #0169d4;
          color: #ffffff;
        }
        /deep/.el-table .name-row {
          background: rgba(255, 255, 255, 0.1);
          color: #0169d4;
        }

        /deep/.el-table .plan-row {
          background: rgba(1, 105, 212, 0.4);
          color: #0169d4;
        }

        .block {
          margin-top: 1%;
          display: flex;
          width: 100%;
          justify-content: flex-end;
          /deep/.el-pagination.is-background .el-pager li:not(.disabled),
          /deep/.el-pagination.is-background .btn-next,
          /deep/.el-pagination.is-background .btn-prev:disabled {
            background-color: transparent; // 进行修改未选中背景和字体
            margin: 0;
          }
          /deep/.el-pagination.is-background
            .el-pager
            li:not(.disabled).active {
            background-color: #0169d4; // 进行修改选中项背景和字
          }
        }
      }
    }
  }
}
#con_left {
  width: 100%;
  height: calc(100% - 48px);
}

#midle_bot {
  width: 100%;
  height: calc(100% - 50px);
}
/deep/.el-table {
  width: 100%;
  height: 100%;
  border-radius: 5px;
}
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
  width: 6px;
  height: 8px;
}
// 设置滚动条的背景色和圆角
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #0169d4;
  border-radius: 8px;
}
</style>
